:root {
  --primary-color: #31c27c;
}
/* 伪类root选择器设置html文档的背景颜色 */
body {
  margin: 0;
  background: #f5f5f5;
  font-family: Microsoft Yahei;
  font-size: 14px;
  /* min-width: 1000px; */
}   
/* 选择器选中body
设置了背景颜色，字体，字体尺寸
 */
a {
  text-decoration: none;
  color: #000;
}
/* 选择器选中a标签
字体颜色设置为黑色
文本属性改了none，这样设置为了取消下划线，更加美观

 */
header {
  height: 90px;
  background: white;
  display: flex;
  align-items: center;
}
/* 设置文档页眉格式
设置了高度，背景颜色，
设置了弹性布局，将弹性div元素所有项目都居中对齐
 */
.header-inner, main {
  /* width: 1200px; */
  padding: 20px;
  margin: auto;
}
/* 设置页眉居中对齐
设置盒子内边距20px
 */
.tag-list {
  margin-top: 50px;
  margin-bottom: 15px;
}
/* 
设置div上边距50，下边距15
*/
.tag-item {
  display: inline-block;
  padding: 0 8px;
  margin-right: 24px;
  line-height: 26px;
  color: #000;
  text-decoration: none;
}
/* 
设置行内布局为内联型
内边距上下0，左右8
外边距右24
行高设为26px
取消下划线
设置了字体颜色
*/

.tag-active {
  background: var(--primary-color);
  color: white;
}
/* 
将背景颜色动态设置为html颜色
*/
.tag-item:not(.tag-active):hover 
{
  color: var(--primary-color);
}
/* 
选择除了.tag-active的tag-item元素,设置动态颜色转变为HTML背景颜色
*/
.nowrap
 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 
设置文本不准换行直至br
当元素溢出时隐藏溢出元素
为隐藏的元素增加省略号

*/
.playlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 45px 15px;
  margin-bottom: 45px;
}
/* 
选择类名为playlist的div
设置元素为网格布置
行列间的边距为45px 15px
设置盒子下边距为45px
*/
.cover-wrap 
{
  display: flex;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 15px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* 
设置行内布局为弹性布局
溢出元素隐藏，位置为相对位置
底部宽度设置为15px
文本设置为居中对齐
设置弹性盒子的布局为居中对齐
*/
.cover-img 
{
  width: 100%;
  transition: all 0.75s;
}
/*  
设置了过度属性，过渡时间为0.75秒
*/
.cover-mask 
{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0;
  transition: all 0.5s;
}
/* 
设置了相对于父容器的绝对位置
背景颜色为黑色，一个过度样式，过渡时间为0.5秒
*/
.cover-play 
{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -35px;
  margin-top: -35px;
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.5s;
}
/* 
设置了相对父容器的绝对位置
设置了效果缩放0.7
过渡时间0.5秒
*/
.cover-wrap:hover .cover-mask 
{
  opacity: 0.2;
}
/* 
设置了div元素的不透明级别0.2
*/
.cover-wrap:hover .cover-play 
{
  opacity: 1;
  transform: scale(1);
}
/* 
设置不透明级别1
设置了缩放效果
*/
.cover-wrap:hover .cover-img 
{
  transform: scale(1.07);
}
/* 
设置放大效果1.07倍
*/
.album-title:hover
 {
  color: var(--primary-color);
}
/* 
颜色动态变化为html文档背景颜色
*/
.album-author {
  color: #999;
  line-height: 1.6;
}
/* 
设置了字体颜色
设置百分比行高1.6倍
*/

.album-author:hover 
{
  color: var(--primary-color);
}
/* 
设置了鼠标选悬停效果，颜色变为html文档背景板颜色
*/
.album-time 
{
  color: #999;
}
/* 设置了字体颜色 */
.page 
{
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 
设置了网页布局
居中对齐
*/
.page-item {
  display: inline-block;
  color: #a2a2a2;
  line-height: 50px;
  padding: 0 20px;
  margin: 10px;
  font-size: 16px;
}
/* 
设置了盒子为内联模型
行高50px，盒子内边距上下0左右20px
外边距10px，字体大小16px
*/
.page-current, .page-item:not(.page-more):hover 
{
  background: var(--primary-color);
  color: white;
}
/* 
设置了鼠标悬停效果
背景颜色
*/
footer {
  margin-top: 60px;
  background: #333;
  height: 200px;
}
/* 
设置了盒子外上边距60px
高度200px
背景颜色
*/

